<template>
  <div class="App">
    <h1>下面是默认插槽：</h1>
    <!-- 将不同的内容传递到组件的插槽 -->
    <DialogCon>确认保存么</DialogCon>

    <!-- 插槽中可以传文本，也可以传任何dom元素 -->
    <DialogCon
      ><p>框架确定，内容定制</p>
      <p>框架确定，内容定制，很强</p>
      <p>框架确定，内容定制，很好</p>
    </DialogCon>

    <!-- 使用插槽默认显示的内容 -->
    <DialogCon></DialogCon>
    <hr />
    <h1>下面是具名插槽，即有具体名字的插槽</h1>
    <PerCon>
      <template slot="slot-header">你确定？</template>
      <template slot="slot-main">是否决定要退出</template>
      <!-- slot="slot-插槽名字" 可以使用 #插槽名字 代替 -->
      <template #slot-footer
        ><button>退出</button><button>取消咯</button></template
      >
    </PerCon>
  </div>
</template>

<script>
import DialogCon from "./components/DialogCon.vue";
import PerCon from "./components/PerCon.vue";
export default {
  components: {
    DialogCon,
    PerCon,
  },
};
</script>

<style>
</style>